<!-- 异常设备详情-->
<template>
  <view>
    <!-- 标题栏 -->
    <Header title="异常设备详情">
    	<uv-icon name="arrow-left" :bold="true" size="20" color="#000"  @click="goBack"></uv-icon>
    </Header>
    <!-- 图片展示 -->
    <view class="image-container">
      <image :src=img class="animal-image"></image>
    </view>
    
    <!-- 牲畜编号 -->
    <view class="info-title">
      <text class="title-text">牛的编号</text>
      <view class="status">
        <view class="status1">{{ healthStatus }}</view>
       <!-- 右箭头图标 -->
       <uv-icon name="arrow-right" color="#ebebeb" size="28"></uv-icon>
      </view>
    </view>
    
    <!-- 信息标题列表0 -->
    <info-title-list :infoTitleList="animalInfoList0"></info-title-list>
    <!-- 设备信息 -->
    <device-info :deviceInfoList="animalInfoList1"></device-info>
	 <!-- 信息标题列表 -->
     <info-title-list :infoTitleList="animalInfoList"></info-title-list>
    <!-- 牲畜信息 -->
    <animal-info :animalInfo="animalInfoList2"></animal-info>
    
    <!-- 底部按钮 -->
    <button class="trace-button" @click="goToTrace">前往追踪</button>
  </view>
  
  <view class="null">
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 引入 Vue Router
import InfoTitleList from '@/components/Animals/InfoTitleList.vue';
import DeviceInfo from '@/components/Animals/DeviceInfo.vue';
import AnimalInfo from '@/components/Animals/AnimalInfo.vue';
import img from '/static/imgs/raw.png';
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';
import Header from '@/components/AppHeader/Header.vue';
// 定义数据
const animalImage = ref('https://example.com/cow-image.jpg');
const healthStatus = ref('偏瘦');
const router = useRouter(); // 获取路由实例
// 信息标题列表数据
const animalInfoList0 = [
  {
    title: '设备信息'
  },

];
const animalInfoList = [

  {
    title: '牲畜信息'
  }
];

// 设备信息数据
const animalInfoList1 = [
  {
    title: '智能耳标',
    type: 'IMEI 123456789',
    battery: '80%'
  },
  {
    title: '智能项圈',
    type: 'IMEI 123456789',
    battery: '1%'
  }
];

// 牲畜信息数据
const animalInfoList2 = [
  {
    title: '牲畜种类',
    type: '牛'
  },
  {
    title: '品种',
    type: '小黄牛'
  },
  {
    title: '性别',
    type: '公'
  },
  {
    title: '年龄',
    type: '5岁两个月'
  },
  {
    title: '体重',
    type: '900KG'
  },
  {
    title: '当前状态',
    type: '生长中'
  },
  {
    title: '是否绝育',
    type: '否'
  },
  {
    title: '疫苗',
    type: '2024-01-22 15:22'
  }
];

const goBack = () => {
  uni.navigateBack();
};

// 前往追踪方法
const goToTrace = () => {
  console.log('前往追踪页面');
};
</script>

<style lang="scss" scoped>
	.bold-title {
	    font-weight: bold;
	  }  
.image-container {
  width: 100%;
  height: 700rpx;
}
.animal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
  font-size: 36rpx;
  font-weight: bold;
  padding:  0rpx 20rpx;
  margin-bottom: 20rpx;
  margin-bottom:20rpx;
}
.status {
  color: #ff6b6b;
  display: flex;
}
.arrow {
  margin-left: 10rpx;
}
.trace-button {
  width: 100%;
  padding: 10rpx;
  background-color: #2ecc71;
  color: white;
  border: none;
  font-size: 40rpx;
  margin-top: 30rpx;
  border-radius: 60rpx;
}
.null{
	height: 20rpx;
}

</style>